<template>
  <div id="module">
    <app-header></app-header>
    <div id="module-one">
      <ul class="mui-table-view">
          <li class="mui-table-view-cell">
            <router-link to="">便民服务</router-link>
          </li>
          <li class="mui-table-view-cell">
              <a class="mui-navigate-right">
                <router-link to="">犬只免疫点</router-link>
              </a>
          </li>
          <li class="mui-table-view-cell">
              <a class="mui-navigate-right">
                <router-link to="/know">养犬须知</router-link>
              </a>
          </li>
          <li class="mui-table-view-cell">
              <a class="mui-navigate-right">
                <router-link to="">养犬登记流程</router-link>
              </a>
          </li>
      </ul>
    </div>
    <div id="moudule-two" class="moudule-two mui-table">
      <div class="mui-table-cell list-one mui-col-xs-2">
        <router-link to="">犬主寻犬</router-link>
      </div>
      <div class="mui-table-cell list-two mui-col-xs-2">
        <router-link to="">信息发布</router-link>
      </div>
      <div class="mui-table-cell list-three mui-col-xs-2">
        <router-link to="">犬只领养</router-link>
      </div>
    </div>
    <app-footer></app-footer>
    <!-- <router-view></router-view> -->
  </div>
</template>
<script>
import AppHeader from "../components/header"
import AppFooter from "../components/Footer"
export default {
  name: 'DogManager',
  components: {
    AppHeader,
    AppFooter
  },
  data() {
    return {
      msg: '德清犬类管理'
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .moudule-two{
      margin-top: 10px;
      background:rgb(255, 253, 253);
      height: 35px;
      line-height: 35px;
      position:relative;
    }
    .mui-col-xs-2{
      cursor: pointer;
    }
    ul li{
      text-align: left;
    }
    /* .mui-table-view-cell{
      list-style: none;
    } */
</style>
